<template>
	<div id="mini_header">
		{{title}}
		<span class="fr" @click="edit">
			<span v-show="!isEdit">编辑</span>
			<span v-show="isEdit">完成</span>
		</span>
	</div>
</template>
<script>
export default{
	name:'MiniHeader',
	data(){
		return{
			isEdit: false
		}
	},
	methods:{
		edit(){
			this.isEdit = !this.isEdit;
			this.$emit('isEdit', this.isEdit);
		}
	},
	props: ['title']
}
</script>
<style lang='less' scoped>
#mini_header{
	width: 10rem;
	height: 1.17rem;
	line-height: 1.17rem;
	text-align: center;
	font-size: .48rem;
	color: #5c5c5c;
	background: #fff;
	position: relative;
	border-bottom: 1px solid #bbb;
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	background: url(../assets/img/common/back.png).4rem no-repeat;
	background-color: #fff;
	.fr{
		position: absolute;
		right: .4rem;
		width: auto;
		top: 0rem;
		font-size: .42rem;
	}
}
</style>